import React, { useRef, useEffect, Fragment } from 'react';
import * as echarts from 'echarts';
import './EchartsLineCross.scss'
import { useIsMobile } from '@/hooks/useIsMobile'

export interface EchartsLineCrossProps {
    id: string,
    width?: string,
    height?: string,
    yAxis: string[],
    seriesData: number[],
    title?: string,
}

const cropHeight = (e: string | number, h: number): string => {
    if (typeof e === 'number') return `${e - h}px`
    let v = Number(e.replace('px', ''))
    return `${v - h}px`
}

const dynamicSetEchartsOptions = (isMobile: boolean, defOptions: any) => {
    const deepOptions = JSON.parse(JSON.stringify(defOptions))

    if (!isMobile) { //非移动端echarts  options设置
        deepOptions.title.textStyle.fontSize = "14px"
        deepOptions.xAxis.axisLabel.fontSize = 12
    }

    return deepOptions
}

const EchartsLineCross: React.FC<EchartsLineCrossProps> = (props) => {
    const echartsOption: any = {
        title: {
            text: '实收金额',
            textStyle: {
                fontWeight: 500,
                fontSize: '12px',
                color: '#333333',
            }
        },
        tooltip: {
            trigger: 'axis',
            show: false,
            // position: 'bottom',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: [
            { show: false, z: 0, left: '5%', top: 30, right: '5%', bootom: 0, height: 0 }
        ],
        xAxis: {
            type: 'value',
            position: 'bottom',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLabel: {
                hideOverlap: true,
                show: true, // 显示坐标轴标签
                interval: 0,// 设置X轴刻度标签的间隔为2，即每隔两个标签显示一次
                fontSize: 10,
            }
        },
        yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: []
        },
        series: [
            {
                name: '生活费',
                type: 'bar',
                barGap: "15%",
                barWidth: '50%',
                barMinWidth: 20,
                barMinHeight: 15,
                stack: '总量',
                label: {
                    show: true,
                    formatter: '{b}'
                },
                data: []
            }
        ],

    };

    const isMobile = useIsMobile()
    const echartsLineOption = dynamicSetEchartsOptions(isMobile, echartsOption)
    const { id } = props
    const w = props.width || '100%'
    const h = !isMobile ? '300px' : props.height || '200px'

    echartsLineOption.yAxis.data = props.yAxis
    echartsLineOption.series[0].data = props.seriesData && props.seriesData.length && props.seriesData.map((item: any) => {
        return {
            label: {
                position: "insideLeft",
                fontSize: !isMobile ? 12 : 10
            },
            ...item
        }
    })
    echartsLineOption.series[0].name = props.title?.includes("毛利额") ? "毛利额" : props.title?.includes("毛利率") ? "毛利率" : "wu"
    echartsLineOption.grid[0].height = cropHeight(h, 60)
    props.title && (echartsLineOption.title.text = props.title)

    const mycanvas = useRef<any>(null)
    // 获取dom 设置图像
    useEffect(() => {
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        mycanvas.current = myChart
        echartsLineOption && myChart.setOption(echartsLineOption)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    useEffect(() => {
        const integerKeyName = ["订单量"]

        if (props.title && integerKeyName.indexOf(props.title) > -1) {
            echartsLineOption.yAxis.minInterval = 1
        } else {
            echartsLineOption.yAxis.minInterval = 0
        }

        echartsLineOption && mycanvas.current.setOption(echartsLineOption)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.yAxis, props.seriesData])

    return (
        <Fragment>
            <div ref={mycanvas} style={{ width: w, height: h }} id={id}></div>
        </Fragment>
    )
}

export default EchartsLineCross
